<template>
  <PageWrapper title="服务器管理" content="">
    <Card title="服务器列表" v-bind="$attrs">
      <template #extra>
        <a-button type="link" size="small">更多</a-button>
      </template>

      <a-card hoverable v-for="vm in vms" style="margin-bottom: 20px">
        <template #actions>
          <setting-outlined key="setting" />
          <edit-outlined key="edit" />
          <span>
          <a-tooltip v-if="vm.isActive">
            <template #title>设为离线</template>
            <pause-outlined @click="setActive(vm, false)" key="ellipsis"
          /></a-tooltip>
          <a-tooltip v-if="!vm.isActive">
            <template #title>设为在线</template
            ><play-circle-outlined @click="setActive(vm, true)" key="ellipsis"
          /></a-tooltip></span>
        </template>
        <a-card-meta :title="vm.name" description="">
          <template #avatar>
            <Icon icon="clarity:vm-solid" size="30" />
          </template>
        </a-card-meta>
        <a-row>
          <a-col :span="4"> <Icon icon="mdi:server" size="" /> 位置: {{ vm.server.name }}</a-col>
          <a-col :span="4"> <Icon icon="ph:cpu" size="" /> CPU: 2 CPU</a-col>
          <a-col :span="4"> <Icon icon="bi:memory" size="" /> 内存: 4 GB</a-col>
          <a-col :span="4"> <Icon icon="icon-park-outline:solid-state-disk" /> 磁盘: 20 GB </a-col>
          <a-col :span="4"> <Icon icon="eos-icons:cronjob" /> 任务数: {{ vm.jobs.length }}</a-col>
          <a-col :span="4">
            状态: <a-tag v-if="vm.isActive" color="success">在线</a-tag
            ><a-tag v-if="!vm.isActive" color="error">离线</a-tag>
          </a-col>
        </a-row>
      </a-card>
    </Card>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  import { PageWrapper } from '/@/components/Page'
  import { Card } from 'ant-design-vue'
  import {
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined,
    PauseOutlined,
    PlayCircleOutlined,
  } from '@ant-design/icons-vue'
  import { Icon } from '/@/components/Icon'
  import { groupItems } from '../dashboard/workbench/components/data'
  import { useDataStore } from '/@/store/modules/data'
  import { notification } from 'ant-design-vue';


  const data = useDataStore()

  function setActive(server, state) {
    let res = data.setVmState(server, state)
    if (res == 2) {
        notification['error']({
          message: '操作结果',
          description:
            '设置虚拟机状态失败，服务器已离线！',
        });
    } else {
      setTimeout(() => {
        notification['success']({
          message: '操作结果',
          description:
            '设置虚拟机状态成功！',
        });
        1000
      })
    }
  }

  export default defineComponent({
    components: {
      Card,
      CardGrid: Card.Grid,
      Icon,
      SettingOutlined,
      EditOutlined,
      EllipsisOutlined,
      PauseOutlined,
      PlayCircleOutlined,
    },
    setup() {
      return { items: groupItems, vms: data.vms, setActive }
    },
  })
</script>
